<template>
	<view class="p12 pt0">
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view @click="toInfo(item)" class="demo-warter pr6" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="pt12 pb20 u-flex u-f-jsb">
						<view class="fz14 u-font-bold u-line-1" style="width: 200rpx;">{{item.title}}</view>
						<view class="tmp-btn fz12 u-font-bold">使用模板</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view @click="toInfo(item)" class="demo-warter pl6" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="pt12 pb20 u-flex u-f-jsb">
						<view class="fz14 u-font-bold u-line-1" style="width: 200rpx;">{{item.title}}</view>
						<view class="tmp-btn fz12 u-font-bold">使用模板</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore :status="loadStatus" @loadmore="addRandomData"></u-loadmore>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				curTab: 1,
				loadStatus: 'loadmore',
				flowList: [],
				keyword: '',
				isLogin: false,
				userInfo: {},
				list: []
			}
		},
		computed: {
			tabbarList() {
				return this.$store.state.tabbarList || '';
			},
		},
		onLoad() {
			this.initData();

			if (this.$db.get("userToken")) {
				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.isLogin = true
						this.userInfo = res.data;
					}
				})

			}
		},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			toInfo(item) {
				uni.navigateTo({
					url:'/pages/diy/index?communityId='+item.id
				})
			},


			initData() {
				this.page = 1
				this.flowList = []
				this.$refs.uWaterfall.clear();
				this.getData()

			},
			getData() {
				this.$api.excellentList({
					pageNo: this.page,
					keyword: this.keyword,
					pageSize: 10,
				}, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.flowList = [...this.flowList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.flowList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style>
</style>

<style lang="scss" scoped>
	.module-tips {
		background: rgba(25, 41, 28, 0.05);
	}
	
	.tmp-btn {
		width: 128rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background: rgba(44, 153, 66, 0.1);
		border-radius: 8rpx;
	
		color: #70B52C;
	}
	
</style>